<template>
  <el-dialog :element-loading-text="ui.loadingText"
             v-loading="ui.busying"
             :before-close="handleClose"
             :title="title"
             append-to-body
             visible
             lock-scroll
             width="600px">
    <el-form :model="form"
             ref="form"
             label-width="80px">
      <el-row type="flex">
        <el-col :span="12">
          <mk-form-item label="角色名称"
                        :mk-le-length="20"
                        required
                        prop="rolename">
            <el-input placeholder="请输入角色名称"
                      v-model="form.rolename"
                      size="small"></el-input>
          </mk-form-item>
        </el-col>
        <el-col :span="12">
          <mk-form-item label="角色编码"
                        :mk-le-length="20"
                        required
                        prop="rolecode">
            <el-input placeholder="请输入角色编码"
                      v-model="form.rolecode"
                      size="small"></el-input>
          </mk-form-item>
        </el-col>
      </el-row>
      <el-row type="flex">
        <el-col :span="24">
          <mk-form-item label="备注"
                        :mk-le-length="200"
                        required
                        prop="remark">
            <el-input type="textarea"
                      :rows="2"
                      placeholder="请输入备注"
                      v-model="form.remark">
            </el-input>
          </mk-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer">
      <mk-button @click="handleClose">取消</mk-button>
      <mk-button :loading="ui.busying"
                 @click="save"
                 :type="2">{{btnName}}</mk-button>
    </div>
  </el-dialog>
</template>


<script>
import { MkBase } from 'element-ui'
import formData from './form-data'
import clone from 'lodash.clone'
export default {
  name: 'resource-form',
  mixins: [MkBase],
  props: {
    row: Object,
    isAdd: Boolean,
    title: String,
    btnName: String
  },
  data () {
    const form = formData()
    return {
      form,
      ui: {
        formLabelWidth: '80px',
        busying: false,
        loadingText: '正在保存'
      }
    }
  },
  async mounted () {
    if (this.isAdd === false) {
      this.form = clone(this.row)
    } else {
      this.$empty(this.form)
      this.form.rolestate = '1'
    }
  },
  methods: {
    handleClose () {
      this.$emit('close')
    },
    save: async function () {
      if (!this.validate) {
        let fn = this.$refs.form.validate
        let nodejs = false
        this.validate = this.$promise({ fn, nodejs })
      }
      if ((await this.validate()) === false) {
        return
      }
      try {
        this.ui.busying = true
        let roleid
        if (this.form.roleid) {
          roleid = await this.$put('/cpSsorole/update.json', this.form)
        } else {
          roleid = await this.$post('/cpSsorole/add.json', this.form)
        }
        if (roleid) {
          this.$emit('close', true)
        }
      } catch (e) {
      }
      this.ui.busying = false
    }
  }
}
</script>
